<template>
	<view>
		<scroll-view scroll-y="ture" :style="{height:viewHeight+'px'}">
			<block v-for="(item,index) in msg" :key="index">
				<view :class="item.user==0?classmodel:classmodel1">
					<view v-if="item.user==0" class="midell">
						<image :src="pic" mode=" scaleToFill"></image>
						<text>{{item.usermsg}}</text>
					</view>
					<view v-if="item.user==1" class="midell">
						<text>{{item.usermsg}}</text>
						<image :src="userimg" mode=" scaleToFill"></image>
					</view>
				</view>
			</block>
		</scroll-view>
		<view style="background-color: #f1f0f0;width: 100%;height: 140rpx; position: fixed;z-index: -1;">
			<view class="send">
				<text class="logoxiao icon iconfont icon-xiaolian"></text>
				<input class="input " v-model="username" style="background-color: #fefefe;" placeholder=" 这位朋友非常棒!" />
				<button style="" @tap="send">发送</button>
			</view>
		</view>
	</view>
</template>

<script>
	// 引入资料窗口
	export default {
		data() {
			
			return {
				classmodel: 'friedsleft',
				classmodel1: 'friedsright',
				viewHeight: 500,
				username: '',
				// php下次再写吧模拟数据
				robot: '',
				msg: [{
					user: 0,
					usermsg: ""
				}],
				pic: '',
				userimg: '',
				longpess: false,
				ai: false,
				usernamebug: ''
			}
		},
		methods: {
			send() {
				if (this.username) {
					this.usernamebug = this.username
					this.username = ''
					let sendmsg = {
						user: 1,
						usermsg: this.usernamebug
					}
					this.robot = this.usernamebug
					this.msg.push(sendmsg)
					if (this.ai) {
						console.warn(464)
						uni.request({
							url: "http://api.qingyunke.com/api.php",
							data: {
								key: 'free',
								appid: 0,
								msg: this.usernamebug
							},
							success: (e) => {
								console.log(e.data)
								let arrydate = e.data.content
								console.log(this.robot)
								let robbotmsg = {
									user: 0,
									usermsg: arrydate
								};
								this.msg.push(robbotmsg);
							}
						})
					} else {
						
						setTimeout((e) => {
							console.log(this.robot)
							let robbotmsg = {
								user: 0,
								usermsg: '你向服务器发送： ' + this.robot
							};
							this.msg.push(robbotmsg);
						}, 1500)
					}
				} else {
					uni.showToast({
						icon: "none",
						title: '您还没输入呢'

					})
				}


			}
		},
		onLoad(option) {
			uni.getSystemInfo({
				success: (res) => {
					console.log(option.pic); //打印出上个页面传递的参数
					this.pic = option.pic
					console.log(this.pic)
					if (option.name == "Ai小助手") {
						console.log("ai")
						this.ai = true
					}

					// console.log(option.con); //打印出上个页面传递的参数。
					uni.setNavigationBarTitle({
						title: option.name
					})
					this.msg[0].usermsg = option.con
					let winheight = res.windowHeight - uni.upx2px(100)
					console.log(winheight)
					this.viewHeight = winheight

				}
			})
			uni.getStorage({
				key: "userInfo",
				success: res => {
					let arrys = res.data
					this.userimg = arrys.avatarUrl
				}

			})
		},
		onNavigationBarButtonTap(val) {
			if (val.index == 0) {
				console.log(545646465)
				uni.navigateTo({
					url:"../me/me"
				})
			}
		},
	}
</script>

<style lang="less">
	.friedsleft {
		width: 96%;
		margin: 2%;
		padding-bottom: 8px;
		display: flex;
		align-items: center;

		.midell {
			display: flex;
			align-items: center;

			image {
				width: 85rpx;
				height: 85rpx;
				border-radius: 22rpx;

			}

			text {
				margin-left: 10rpx;
				font-size: 26rpx;
				font-weight: bolder;
			}
		}

	}

	.friedsright {
		width: 96%;
		margin: 2%;
		padding-bottom: 8px;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.midell {
			display: flex;
			align-items: center;

			image {
				width: 85rpx;
				height: 85rpx;
				border-radius: 22rpx;
			}

			text {
				margin-right: 10rpx;
				font-size: 26rpx;
				font-weight: bolder;
			}
		}
	}

	.send {
		height: 80rpx;
		position: fixed;
		bottom: 1%;
		left: 6%;
		font-size: 33rpx;
		display: flex;
		width: 92%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.input {
			border: 1rpx solid #D9D9D9;
			width: 70%;
			height: 100%;
			border-radius: 8rpx;
		}

		.logoxiao {
			margin-right: 2%;
			font-size: 55rpx;
		}

		button {
			background-color: #09BB07;
			color: white;
			font-size: 33rpx;
			height: 80rpx;
			margin-left: 1%;
		}
	}
</style>
